<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width,maximum-scale=1,minimum-scale=1,user-scalable=no" />
		<title>Dojo Touch Testing</title>
		<style type="text/css">
			#test {
				width: 300px;
				height: 150px;
				border: 1px solid #7FB0DB;
				background-color: #7FB0DB;			
			}
			#innertest {
				border: 1px solid white;
				width: 100px;
				heigh: 75px;
				background-color: white;
			}
			#test2 {
				/* for testing touch.move */
				width: 200px;
				height: 50px;
				border: 1px solid yellow;
				background-color: yellow;
			}
			#current, #log {
				width: 300px;
				height: 200px;
				float: left;
			}
			#dohDiv{
				display: none;
			}			
		</style>
		<script type="text/javascript" src="../dojo.js" data-dojo-config="async: true"></script>
		<script>
			require([
				"dojo/_base/array",
				"dojo/dom",
				"dojo/_base/lang",
				"dojo/touch",
				"dojo/on",
				"dojo/has",
				"dojo/domReady!"
			], function(array, dom, lang, touch, on, has){

				var mspointer = navigator.msPointerEnabled; // IE10+ PSPointer events?
				
				var action = function(comment, e){
					// summary:
					//		Callback to display into when events fire
					// Detailed log of the most recent event:

					dom.byId("current").innerHTML = "Most recent non touch.move event:";
					var info = "[Touch Event]: " + e.type + " on " + comment +
							"<br/> ------ Event Properties: ------<br/>";
					for(var i in e){
					  if(i == "touches" || i == "targetTouches" || i == "changedTouches"){
						info += i + ": " + e[i].length + "<br/>";
					  }else{
						if(typeof e[i] != "function"){
						  info += " " + i + ": " + e[i] + "<br/>";
						}
					  }
					}
					dom.byId("current").innerHTML += info + "<br/>";

					// This is a log of all events, most recent first:
					dom.byId("log").innerHTML = comment + "{type:" +
							e.type + ", target:" + (e.target.id||e.target.tagName) +
							"}<br/>" + dom.byId("log").innerHTML;

					e.preventDefault();
				};

				var node = dom.byId("test"),
					innerNode = dom.byId("innertest");

				//1. should work well on PC and touch devices
				array.forEach(["test", "innertest"], function(name){
					for(var event in touch){
						if(event != "move"){
							on(dom.byId(name), touch[event], lang.hitch(null, action, "on("+name+", touch."+event+")-->"));
						}
					}
				});

				on(dom.byId("test2"), touch.move, function(e){
					dom.byId("log").innerHTML = "on(touch2, touch.move)--> {type:" +
							e.type + ", target:" + (e.target.id||e.target.tagName) +
							", pageX = " + e.pageX + ", pageY = " + e.pageY +
							"}<br/>" + dom.byId("log").innerHTML;


					// this should stop scrolling
					e.preventDefault();

					// stopPropagation() should work too
					e.stopPropagation();
				});

//					//2. should work well across touch devices
//					on(node, "touchstart", action);
//					on(node, "touchmove", action);
//					on(node, "touchend", action);
//					on(node, "touchcancel", action);
//					on(node, "orientationchange", action);


				//================================= DoH tests - only running on desktop ======================
				if(has("touch")){
					//FIXME - DoH not supported on touch device
					return;
				}

				require(["doh/runner", "dojo/dom-style"], function(doh, domStyle){
					var dohDiv = dom.byId('dohDiv');
					domStyle.set(dohDiv, {display: 'block'});

					function setObj(obj, e){
						obj.type = e.type;
						obj.target = e.target;
					}
					function assert(obj, type, target){
						doh.assertEqual(type, obj.type);
						doh.assertEqual(target, obj.target);
					}

					doh.register("dojo.touch", [
						function press(){
							var executed, obj = {};
							on(dohDiv, touch.press, function(e){
								//console.log(e.type);
								executed = true;
								setObj(obj, e);
							});
							on.emit(dohDiv, mspointer?'MSPointerDown':'mousedown', {});
							doh.assertTrue(executed, 'dojo.touch.press not fired');
							assert(obj, mspointer?'MSPointerDown':'mousedown', dohDiv);
						},
						function move(){
							var executed, obj = {};
							on(dohDiv, touch.move, function(e){
								//console.log(e.type);
								executed = true;
								setObj(obj, e);
							});
							on.emit(dohDiv, mspointer?'MSPointerMove':'mousemove', {});
							doh.assertTrue(executed, 'dojo.touch.move not fired');
							assert(obj, mspointer?'MSPointerMove':'mousemove', dohDiv);
						},
						function release(){
							var executed, obj = {};
							on(dohDiv, touch.release, function(e){
								//console.log(e.type);
								executed = true;
								setObj(obj, e);
							});
							on.emit(dohDiv, mspointer?'MSPointerUp':'mouseup',  {screenX: 0, screenY: 50});
							doh.assertTrue(executed, 'dojo.touch.release not fired');
							assert(obj, mspointer?'MSPointerUp':'mouseup', dohDiv);
						},
						function cancel(){
							var executed, obj = {};
							on(dohDiv, touch.cancel, function(e){
								executed = true;
								setObj(obj, e);
							});
							on.emit(dohDiv, 'mouseout',  {screenX: 0, screenY: 50});
							doh.assertTrue(executed, 'dojo.touch.cancel not fired');
							assert(obj, 'mouseout', dohDiv);
						}
					]);

					doh.run();
				});
			});
		</script>
	</head>
	<body>
		<div id="test">
			test
			<div id="innertest">
				inner test
			</div>
		</div>
		<div id="test2">
			touch.move
		</div>
		<div id="current"></div>
		<div id="log"></div>
		<br style="clear:both"/>
		<div id="dohDiv">doh</div>
	</body>
</html>
